<template>
  <div>
    <h1>详情页面</h1>

    <router-link :to="{ name: 'detail', query: { id: 200 } }">
      Banana
    </router-link>
  </div>
</template>

<script>
export default {
  mounted() {
    // 观察里面的 params 有没有信息
    // console.log(this.$route);
  },

  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next();
  },

  beforeRouteUpdate(to, from, next) {
    // 用于详情页面复用的情况
    console.log("beforeRouteUpdate");
    next();
  },

  beforeRouteLeave(to, from, next) {
    // 用于一些填写资料等页面时,没有填写完后退时给些提示.
    console.log("beforeRouteLeave");
    next();
  },
};
</script>
